<template>
    <div class="album-center">
        <el-page-header @back="goBack" class="detail-page-header">
            <template #content>
                    <!-- 显示项目名称 -->
                    <span class="text-large font-600 mr-3"> {{ '视频' }} </span>
            </template>
            <!-- 如果需要，可以在 PageHeader 右侧添加额外内容或操作按钮 -->
        </el-page-header>
        <el-divider />
        <el-main class="album-page-main" style="padding: 0;">
            <div class="detail-page-main-box-btn">
                <el-button type="primary" @click="addAlbum">
                    新增
                </el-button>
            </div>
            <div class="album-page-main-content">
                <el-row :gutter="20"  style="width: 100%;">
                    <el-col :span="4" v-for="item in albumList" :key="item.id">
                        <div class="album-page-main-content-item">
                            <video :src="item.video" style="width: 100%;height: 100px;" @click="openVideo(item.video)"></video>
                            <!-- <el-image :src="item.cover || photoImage" style="width: 100%;height: 100px;" fit="contain">
                                <template #placeholder>
                                    <div class="image-slot">加载中<span class="dot">...</span></div>
                                </template>
                            </el-image> -->
                            <div>{{ item.title }}</div>
                            <div>
                                <el-button type="info" class="album-page-main-content-button" link @click="handleEdit(item)">编辑</el-button>
                                <el-button type="danger" class="album-page-main-content-button" link @click="handleDelete(item.id)">删除</el-button>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </el-main>
        <edit-popup v-if="showEdit" ref="editRef" @success="getAlbumList" @close="showEdit = false" />
        <el-dialog v-model="dialogTableVisible" title="视频预览" width="800">
            <video :src="videoUrl" :controls="showControls" :autoplay="autoPlay" :defaultMuted="defaultMuted" :volume="volumeValue" :disablePictureInPicture="disablePictureInPicture" :muted="muted" :loop="loop"></video>
        </el-dialog>
    </div>
</template>
<script lang="ts" setup>
    import { ref, onMounted, defineProps, shallowRef, computed, watch, reactive, nextTick } from 'vue';
    import type { FormInstance, UploadProps } from 'element-plus'
    import { apiVideoList, apiVideoDel } from '@/api/video';
    import photoImage from '../../assets/images/photo.png'
    import feedback from '@/utils/feedback';
    import EditPopup from './videoEdit.vue'
    const editRef = shallowRef<InstanceType<typeof EditPopup>>()
    const showEdit = ref(false)

    // 视频预览
    const videoUrl = ref('')
    const dialogTableVisible = ref(false)
    // 视频配置
    const showControls = ref(true) // 是否显示controls
    const autoPlay = ref(true) // 是否自动播放
    const muted = ref(false) // 是否静音
    const loop = ref(false) // 是否循环
    const disablePictureInPicture = ref(false) // 是否禁用画中画
    const volumeValue = ref(1) // 音量
    const defaultMuted = ref(false)

    // 父传子
    const props = defineProps({
        memorialId: {
            type: [Number, String],
            default: ''
        }
    })
    // 子传父
    const emit = defineEmits<{
        (e: 'back-to-list', from: string): void;
        (e: 'to-photo-list', itemId: number | string): void;
    }>();

    
    
    // 获取数据
    const albumList = ref([]);
    const getAlbumList = async () => {
        const data = await apiVideoList({mu_id: props.memorialId})
        console.log(data)
        albumList.value = data.list
    }
    // --- 方法 ---

    
    
    // 返回
	const goBack = () => {
		console.log('返回上一页...');
		// 实现返回逻辑, 比如使用 vue-router 的 router.back()
		// alert('返回上一页 (模拟)');
		emit('back-to-list', 'albumList')
	};
    // 新增相册
    const addAlbum = async () => {
        console.log('新增相册...');
        showEdit.value = true
        await nextTick()
        editRef.value?.setFormData({
            mu_id: props.memorialId,
        })
        editRef.value?.open('add')
    }
    // 修改相册
    const handleEdit = async (data: any) => {
        showEdit.value = true
        await nextTick()
        editRef.value?.open('edit')
        editRef.value?.setFormData(data)
    }
    // 删除相册
    const handleDelete = async (id: any[] | number) => {
        await feedback.confirm('确定要删除？')
        await apiVideoDel({ id })
        getAlbumList()
    }
    onMounted(() => {
        getAlbumList()
    })


    const openVideo = async (videoUrls: string) => {
        dialogTableVisible.value = true
        await nextTick()
        videoUrl.value = videoUrls

    }
    
</script>

<style scoped>
    .album-page-main-content{
        margin-top: 20px;
    }
    .album-page-main-content-item :deep(.el-image){
        height: 100px !important;
    }
</style>